/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-22 15:53:23
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
} from 'react-native';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorDeepGray,
  fontColorBlack,
  mainBgColorLightGray,
} from '@/styles';
import { _, Button, Check } from '@/common';

const { Submit } = Button;

export default class ApplyInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const {
      applicationInsuranceDetail,
      insurCommercialFlag,
      insurCommercialAmount,
      insurCompulsoryFlag,
      insurCompulsoryAmount,
      insurAmount,
      taxAmount,
      onChange,
    } = this.props;
    return (
      <View style={styles.wrap}>
        <View style={styles.item}>
          <Text style={styles.label}>车主姓名</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.carOwnerName || '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>车辆种类</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.carType
              ? applicationInsuranceDetail.carType.name
              : '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>车牌号</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.carNo || '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>投保联系人</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.insureLinkMan || '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>投保险种</Text>
          <View style={styles.descWrap}>
            <Check
              checked={insurCommercialFlag == 'Y'}
              onCheck={() => {
                if (insurCommercialFlag == 'Y') {
                  onChange('insurCommercialFlag', 'N');
                  this.insurCommercialAmountOnChange(null);
                } else {
                  onChange('insurCommercialFlag', 'Y');
                }
              }}
              style={{ marginRight: px2dp(16) }}
            />
            <Text style={styles.desc}>商业险</Text>
          </View>
        </View>
        {insurCommercialFlag == 'Y' && (
          <View style={styles.item}>
            <View style={styles.itemInput}>
              <TextInput
                placeholder='请输入保费金额'
                style={[
                  styles.textInputStyle,
                  { color: fontColorBlack },
                ]}
                value={insurCommercialAmount}
                defaultValue={insurCommercialAmount}
                underlineColorAndroid='transparent'
                onChangeText={(val) => {
                  // 清理非数字.
                  val = _.clearNoNum(val);
                  // 保留两位小数
                  val = _.clearDotNumTo2(val);
                  this.insurCommercialAmountOnChange(val);
                }}
                keyboardType={
                  Platform.OS === 'android' ? 'numeric' : 'decimal-pad'
                }
              />
              <Text style={{ color: fontColorDeepGray }}>元</Text>
            </View>
          </View>
        )}

        <View style={styles.item}>
          <Text style={styles.label}>投保险种</Text>
          <View style={styles.descWrap}>
            <Check
              checked={insurCompulsoryFlag == 'Y'}
              onCheck={() => {
                if (insurCompulsoryFlag == 'Y') {
                  onChange('insurCompulsoryFlag', 'N');
                  this.insurCompulsoryAmountOnChange(null);
                } else {
                  onChange('insurCompulsoryFlag', 'Y');
                }
              }}
              style={{ marginRight: px2dp(16) }}
            />
            <Text style={styles.desc}>交强险</Text>
          </View>
        </View>

        {insurCompulsoryFlag == 'Y' && (
          <View style={styles.item}>
            <View style={styles.itemInput}>
              <TextInput
                placeholder='请输入保费金额'
                style={[
                  styles.textInputStyle,
                  { color: fontColorBlack },
                ]}
                value={insurCompulsoryAmount}
                underlineColorAndroid='transparent'
                onChangeText={(val) => {
                  // 清理非数字.
                  val = _.clearNoNum(val);
                  // 保留两位小数
                  val = _.clearDotNumTo2(val);
                  this.insurCompulsoryAmountOnChange(val);
                }}
                keyboardType={
                  Platform.OS === 'android' ? 'numeric' : 'decimal-pad'
                }
              />
              <Text style={{ color: fontColorDeepGray }}>元</Text>
            </View>
          </View>
        )}
        <View style={[styles.item, { justifyContent: 'space-between' }]}>
          <Text style={styles.label}>保费总计</Text>
          <Text style={styles.desc}>
            {insurAmount || '0'}
            元
          </Text>
        </View>
      </View>
    );
  }

  insurCommercialAmountOnChange = (val) => {
    const {
      insurCompulsoryAmount,
      taxAmount,
      onChange,
    } = this.props;
    onChange('insurCommercialAmount', val);
    onChange(
      'insurAmount',
      (Number(val) * 100 + Number(insurCompulsoryAmount) * 100) / 100,
    );
    onChange(
      'insurAllAmount',
      (Number(val) * 100 +
        Number(insurCompulsoryAmount) * 100 +
        Number(taxAmount) * 100) /
        100,
    );
  };

  insurCompulsoryAmountOnChange = (val) => {
    const {
      insurCommercialAmount,
      taxAmount,
      onChange,
    } = this.props;
    onChange('insurCompulsoryAmount', val);
    onChange(
      'insurAmount',
      (Number(val) * 100 + Number(insurCommercialAmount) * 100) /
        100,
    );
    onChange(
      'insurAllAmount',
      (Number(val) * 100 +
        Number(insurCommercialAmount) * 100 +
        Number(taxAmount) * 100) /
        100,
    );
  };
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    marginTop: px2dp(24),
    paddingVertical: px2dp(16),
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(16),
  },
  label: {
    fontSize: px2dp(28),
    color: fontColorDeepGray,
    width: px2dp(264),
  },
  desc: {
    fontSize: px2dp(28),
    color: fontColorBlack,
    fontWeight: 'bold',
  },
  descWrap: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  itemInput: {
    paddingHorizontal: px2dp(24),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    width: '100%',
  },
  textInputStyle: {
    height: px2dp(88),
    flex: 1
  }
});
